<template>
  <div class="lesson-tabs">
    <ul class="tabs flex-row">
      <li :class="['tab', { 'active': tabId == 1 }]" @click="changeTab(1)">内容</li>
      <li :class="['tab', { 'active': tabId == 2 }]" @click="changeTab(2)">评论</li>
      <li :class="['tab', { 'active': tabId == 3 }]" @click="changeTab(3)">笔记</li>
    </ul>
    <div v-if="tabId === 1" class="content">
      <!-- <div class="alert flex-row">
        <span>杨老师备注：课后习题要做，提交到班级群里。</span>
        <img src="~@/assets/images/icon_gb@2x.png" />
      </div> -->
      <div class="content-box" v-html="studyInfo.content">
        <!-- <div class="li-en active">
          He's a quiet boy, introspective and thoughtful,like he.
        </div>
        <div class="li-zh">
          他是个很安静的男孩，内省，一直在深思
        </div> -->
      </div>
    </div>
    <!-- 评论 -->
    <div v-if="tabId === 2" class="comment-list">
      <div class="top-box">
        <div class="top-all">
          全部评论（{{commentNum}}）
        </div>
        <el-button @click="showDialogComment(1)">发表评论</el-button>
      </div>
      <ul>
        <li v-for="item in commentList" :key="item.commentId">
          <img class="head-img" :src="item.headImageUrl" alt="">
          <div class="li-content">
            <div class="name-box">
              <div class="name">{{item.stuName}}</div>
              <!-- <div class="desc">
                厦门大学英语19级01班
              </div> -->
            </div>
            <div class="li-detail">
              {{item.comment}}
            </div>
            <div class="reply-ul" v-if="item.reply.length">
              <div class="reply-li" v-for="_item in item.reply" :key="_item.replyId">
                <span class="reply-name">
                  {{_item.replyStuName}}:
                </span>
                {{_item.replyComment}}
              </div>
            </div>
            <div class="btm-box">
              <div class="time">
                {{item.time}}
              </div>
              <div class="btm-right-box">
                <img class="comment-img" src="@/assets/images/icon_hf@2x.png" @click="showDialogComment(2, item.commentId)">
                <div class="comment-btn" @click="showDialogComment(2, item.commentId)">评论（{{item.reply.length}}）</div>
                <img class="zan-img" src="@/assets/images/icon_dz@2x.png" alt="">
                <!-- <img class="zan-img" src="@/assets/images/icon_dz2@2x.png" alt=""> -->
                <div class="zan-btn">点赞（{{item.likeNum}}）</div>
              </div>
            </div>

          </div>
        </li>
      </ul>
    </div>

    <div v-if="tabId === 3" class="note-list">
      <div class="top-box">
        <div class="top-box-title">
          我的笔记
        </div>
        <div class="top-right-box">
          <div class="comment-kong" v-if="noteInfo.isPublish === '0'" @click="publicNote('1')"></div>
          <img class="comment-img" src="@/assets/images/icon_yxz@2x.png"  @click="publicNote('0')" v-else />
          <div class="comment-btn">公开笔记</div>
          <img class="ji-img" src="@/assets/images/icon_jbj@2x.png" alt="" @click="showDialogComment(3)"/>
          <div class="ji-btn" @click="showDialogComment(3)">记笔记</div>
        </div>
      </div>
      <div class="my-note-box">
        {{noteInfo.myNote}}
      </div>
      <div class="more-box">
        <div class="more-title">
          更多笔记 <span class="desc">（隐藏）</span>
        </div>

        <ul v-if="noteInfo.moreNote && noteInfo.moreNote.length > 0">
          <li v-for="item in noteInfo.moreNote" :key="item.note">
            <img class="head-img" :src="item.headImgUrl" alt="">
            <div class="li-content">
              <div class="name-box">
                <div class="name">{{item.stuName}}</div>
                <!-- <div class="desc">
                厦门大学英语19级01班
              </div> -->
              </div>
              <div class="li-detail">
                {{item.note}}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog :title="commentType === 3 ? '发表笔记':'发表评论'" :visible.sync="dialogCommentVisible">
      <el-form>
        <el-form-item :label="commentType === 3 ? '笔记内容':'评论内容'">
          <el-input v-model="commentVal" type="textarea" :autosize="{ minRows: 2, maxRows: 10}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCommentVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmComment">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  commentList,
  addComment,
  addCommentReply,
  noteList,
  addNote,
  publicNote
} from '@/api/student/lesson/study'
export default {
  name: 'NoList',
  props: {
    studyInfo: {
      type: Object,
      default: () => {}
    },
    resourceLessonChapterId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tabId: 3,
      commentList: [],
      commentNum: '0',
      dialogCommentVisible: false,
      commentType: 1, // 1-发表评论 2-发表跟评 3-发表笔记
      commentVal: '',
      commentId: 0,
      noteInfo: {}
    }
  },
  mounted () {},
  methods: {
    changeTab (tab) {
      this.tabId = tab
      if (this.tabId === 2) {
        this.getCommentList()
      } else if (this.tabId === 3) {
        this.getNoteList()
      }
    },
    async getCommentList () {
      const res = await commentList({
        resourceLessonChapterId: this.resourceLessonChapterId
      })
      this.commentList = res.data.commentData
      this.commentNum = res.data.commentNum
    },
    showDialogComment (type, commentId) {
      this.commentType = type
      if (type === 2) {
        this.commentId = commentId
      }
      this.commentVal = ''
      this.dialogCommentVisible = true
    },
    async getNoteList () {
      const res = await noteList({
        resourceLessonChapterId: this.resourceLessonChapterId
      })
      this.noteInfo = res.data
    },
    async confirmComment () {
      let res
      if (this.commentType === 1) {
        res = await addComment({
          resourceLessonChapterId: this.resourceLessonChapterId,
          comment: this.commentVal
        })
      } else if (this.commentType === 2) {
        res = await addCommentReply({
          resourceLessonChapterId: this.resourceLessonChapterId,
          comment: this.commentVal,
          commentId: this.commentId
        })
      } else if (this.commentType === 3) {
        res = await addNote({
          resourceLessonChapterId: this.resourceLessonChapterId,
          note: this.commentVal
        })
      }
      if (res.code === '200') {
        this.$message({
          message: '发表成功',
          type: 'success'
        })
        if (this.commentType === 3) {
          this.getNoteList()
        } else {
          this.getCommentList()
        }
        this.dialogCommentVisible = true
      } else {
        this.$message.error(res.message)
      }
    },
    async publicNote (type) {
      if (!this.noteInfo.noteId) {
        this.$message.error('你还没有发表笔记哦')
        return
      }
      const res = await publicNote({
        noteId: this.noteInfo.noteId,
        isPublish: type
      })
      if (res.code === '200') {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.getNoteList()
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.lesson-tabs {
  .tabs {
    width: 100%;
    height: 60px;
    .tab {
      width: 33%;
      text-align: center;
      font-size: 20px;
      height: 60px;
      line-height: 60px;
      color: #101d37;
      cursor: pointer;
      &.active {
        color: #009cf6;
        position: relative;
        &::before {
          content: "";
          width: 52px;
          height: 6px;
          background: rgba(0, 156, 246, 1);
          border-radius: 3px;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .content {
    .alert {
      padding: 20px;
      height: 44px;
      background: rgba(245, 245, 246, 1);
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(248, 111, 51, 1);
      }
      .img {
        width: 14px;
        height: 14px;
        cursor: pointer;
      }
    }
    .content-box {
      height: 315px;
      overflow: scroll;
      padding-left: 22px;
      padding-top: 10px;
      padding-bottom: 30px;
      .li-en {
        line-height: 40px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        &.active {
          color: #009cf6;
        }
      }
      .li-zh {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(16, 29, 55, 1);
        line-height: 22px;
        opacity: 0.6;
      }
    }
  }
  .comment-list {
    padding: 0 22px;
    .top-box {
      display: flex;
      height: 57px;
      justify-content: space-between;
      align-items: center;
      .top-all {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(16, 29, 55, 1);
        line-height: 52px;
      }
    }
    ul {
      overflow: scroll;
      height: 298px;
      li {
        display: flex;
        padding-top: 13px;
        .head-img {
          width: 40px;
          height: 40px;
          background: rgba(191, 191, 191, 1);
          border-radius: 50%;
          margin-right: 10px;
        }
        .li-content {
          flex: 1;
          border-bottom: 1px solid rgba(233, 233, 233, 1);
          padding-bottom: 13px;
          .name-box {
            margin-bottom: 20px;
            display: flex;
            .name {
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: bold;
              color: rgba(16, 29, 55, 1);
              margin-right: 13px;
            }
            .desc {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: bold;
              color: rgba(16, 29, 55, 1);
              opacity: 0.6;
            }
          }
          .li-detail {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(16, 29, 55, 1);
            line-height: 22px;
            margin-bottom: 8px;
          }
          .reply-ul {
            width: 620px;
            background: rgba(245, 245, 246, 1);
            border-radius: 4px;
            padding: 12px;
            padding-top: 1px;
            margin-bottom: 10px;
            .reply-li {
              margin-top: 10px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #101d37;
              .reply-name {
                color: rgba(0, 156, 246, 1);
              }
            }
          }
          .btm-box {
            height: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            .time {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(183, 183, 183, 1);
            }
            .btm-right-box {
              display: flex;
              align-items: center;
              .comment-img {
                height: 21px;
                width: 21px;
              }
              .comment-btn {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(16, 29, 55, 1);
                opacity: 0.6;
                margin-left: 8px;
                margin-right: 23px;
              }
              .zan-img {
                height: 20px;
                width: 21px;
              }
              .zan-btn {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(16, 29, 55, 1);
                opacity: 0.6;
                margin-left: 8px;
              }
            }
          }
        }
      }
    }
  }
  .note-list {
    padding: 0 22px;
    .top-box {
      display: flex;
      justify-content: space-between;
      height: 70px;
      align-items: center;
      .top-box-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(16, 29, 55, 1);
      }
      .top-right-box {
        display: flex;
        align-items: center;
        .comment-kong {
          cursor: pointer;
          width: 20px;
          height: 20px;
          border: 2px solid #ccc;
          margin-right: 8px;
          border-radius: 50%;
        }
        .comment-img {
          cursor: pointer;
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }
        .comment-btn {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(16, 29, 55, 1);
          margin-right: 31px;
        }
        .ji-img {
          width: 21px;
          height: 20px;
          margin-right: 8px;
        }
        .ji-btn {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(0, 142, 224, 1);
        }
      }
    }
    .my-note-box {
      width: 687px;
      background: rgba(245, 245, 246, 1);
      border-radius: 5px;
      padding: 16px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(16, 29, 55, 1);
      line-height: 22px;
      margin-bottom: 20px;
    }
    .more-box {
      .more-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(16, 29, 55, 1);
        .desc {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(16, 29, 55, 1);
          line-height: 42px;
          opacity: 0.6;
        }
      }
    }
    ul {
      overflow: scroll;
      height: 135px;
      li {
        display: flex;
        padding-top: 13px;
        .head-img {
          width: 40px;
          height: 40px;
          background: rgba(191, 191, 191, 1);
          border-radius: 50%;
          margin-right: 10px;
        }
        .li-content {
          flex: 1;
          border-bottom: 1px solid rgba(233, 233, 233, 1);
          padding-bottom: 13px;
          .name-box {
            margin-bottom: 20px;
            display: flex;
            .name {
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: bold;
              color: rgba(16, 29, 55, 1);
              margin-right: 13px;
            }
            .desc {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: bold;
              color: rgba(16, 29, 55, 1);
              opacity: 0.6;
            }
          }
          .li-detail {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(16, 29, 55, 1);
            line-height: 22px;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
}
</style>
